import DrawsAbstract from "../DrawsAbstract";
import gsap from "gsap";
import Rect from "../Rect";

export default class DrawArrow extends DrawsAbstract{
    drawStyle = {
        size: {
            width: 0,
            height: 0
        },
        position: {
            x: 0,
            y: 0
        },
        baseRect: {
            x: 0,
            y: 0.2,
            width: 0,
            height: 0.6,
            radius: 1,
            bgColor: 'rgba(116,185,255,0)'
        },
        triangle: {
            x: 0.8,
            y: 0.5,
            height: 0,
            width: 0,
            bgColor: 'rgba(116,185,255,0)'
        }
    }

    constructor(ctx: CanvasRenderingContext2D, size?: {width: number, height: number}, position?: {x: number, y: number}) {
        super(ctx, size, position);
    }

    realDraw() {
        this.drawBaseRect()
        this.drawTriangle()
    }

    in() {
        this.drawStyle.position = this.position
        this.drawStyle.size = this.size
        gsap.to(this.drawStyle.baseRect, {
            duration: this.baseDuration / 2,
            bgColor: 'rgba(116,185,255,1)',
            width: 0.8
        })
        gsap.to(this.drawStyle.triangle, {
            delay: this.baseDuration / 2,
            duration: this.baseDuration / 2,
            y: 0,
            height: 1,
            width: 0.2,
            bgColor: 'rgba(116,185,255,1)'
        })
    }

    out() {
        gsap.to(this.drawStyle.baseRect, {
            delay: this.baseDuration / 2,
            duration: this.baseDuration / 2,
            bgColor: 'rgba(116,185,255,0)',
            width: 0
        })
        gsap.to(this.drawStyle.triangle, {
            duration: this.baseDuration / 2,
            y: 0.5,
            height: 0,
            width: 0,
            bgColor: 'rgba(116,185,255,0)'
        })
    }

    private drawBaseRect() {
        const baseRect = this.drawStyle.baseRect
        this.ctx.fillStyle = baseRect.bgColor
        this.ctx.strokeStyle = 'transparent'
        new Rect(
            this.ctx,
            this.drawStyle.position.x + this.drawStyle.size.width * baseRect.x,
            this.drawStyle.position.y + this.drawStyle.size.height * baseRect.y,
            this.drawStyle.size.width * baseRect.width,
            this.drawStyle.size.height * baseRect.height,
        ).drawRect()
    }

    private drawTriangle() {
        const triangle = this.drawStyle.triangle
        const ptA = [this.drawStyle.position.x + this.drawStyle.size.width * triangle.x, this.drawStyle.position.y + this.drawStyle.size.height * triangle.y]
        const ptB = [this.drawStyle.position.x + this.drawStyle.size.width * triangle.x, this.drawStyle.position.y + this.drawStyle.size.height * (triangle.y + triangle.height)]
        const ptC = [this.drawStyle.position.x + this.drawStyle.size.width * (triangle.x + triangle.width), this.drawStyle.position.y + this.drawStyle.size.height * (triangle.y  + triangle.height) / 2]

        this.ctx.fillStyle = triangle.bgColor
        this.ctx.strokeStyle = 'transparent'
        this.ctx.beginPath();

        this.ctx.moveTo(ptA[0], ptA[1]);
        this.ctx.lineTo(ptB[0], ptB[1]);
        this.ctx.lineTo(ptC[0], ptC[1]);
        this.ctx.lineTo(ptA[0], ptA[1]);

        this.ctx.closePath()
        this.ctx.stroke();
        this.ctx.fill()
    }
}
